﻿@model CTM.Web.Models.View.Home.HomeViewModel
@using CTM.Web.Utils
@{
    ViewBag.Title = "Home";
    int totalConversation = Model.Conversations.Count();
    int totalFeedback = Model.Feedbacks.Count();
}

<form class="form-inline" onsubmit="getSummaries(event);">
    <div class="form-group">
        <label>Year</label>
        <div class="input-group year">
            <input type="text" class="form-control" name="Year" value="@Model.Year" onchange="$(this).closest('form').submit();" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</form>

<div id="home-summary">
    @Html.Partial("_Summary", Model)
</div>

@section scripts {
    @Styles.Render("~/Content/morris")
    @Scripts.Render("~/bundles/raphael")
    @Scripts.Render("~/bundles/morris")

    <script type="text/javascript">
        function getSummaries(e) {
            var form = $(e.target).closest('form')[0];
        }
        function getConversations(e) {
            e.preventDefault();
            var form = $(e.target).closest('form')[0];
            var data = {
                Id: form.elements.Id.value,
                Year: form.elements.Year.value,
                Statuses: [],
                Types: [],
                Keyword: form.elements.Keyword.value
            };
            for (var i = 0; i < form.elements.Statuses.length; i++) {
                if(form.elements.Statuses[i].checked) {
                    data.Statuses.push(form.elements.Statuses[i].value);
                }
            }
            for (var i = 0; i < form.elements.Types.length; i++) {
                if(form.elements.Types[i].checked) {
                    data.Types.push(form.elements.Types[i].value);
                }
            }
            $('#conversation-result').load('@Url.Action("ConversationPartial", "Home")', $(form).serialize());
        }
        function getFeedbacks(e) {
            e.preventDefault();
            var form = $(e.target).closest('form')[0];
            var data = {
                Id: form.elements.Id.value,
                Year: form.elements.Year.value,
                Emoticons: [],
                //GivenToMe: form.elements.GivenToMe.checked,
                //GivenByMe: form.elements.GivenByMe.checked,
                GivenToMe: true,
                GivenByMe: true,
                Keyword: form.elements.Keyword.value
            };
            for (var i = 0; i < form.elements.Emoticons.length; i++) {
                if(form.elements.Emoticons[i].checked) {
                    data.Emoticons.push(form.elements.Emoticons[i].value);
                }
            }
            $('#feedback-result').load('@Url.Action("FeedbackPartial", "Home")', data);
        }
        function initHomeCharts() {
            if(@totalConversation > 0) {
                new Morris.Donut({
                    // ID of the element in which to draw the chart.
                    element: 'chart-status',
                    // Chart data records -- each entry in this array corresponds to a point on the chart.
                    data: [
                        @foreach (var emoticon in Model.Statuses)
                        {
                            <text>{ label: '@emoticon.GetDescription()', value: '@Model.Conversations.Count(c => c.Emoticon == emoticon)' },</text>
                        }
                    ],
                    colors: ['#8bc34a', '#ffc107', '#e84e40', '#03a9f4', '#9c27b0', '#90a4ae'],
                    formatter: function (y) { return Math.round(y * 100 / @totalConversation) + "%" },
                    resize: true
                });
                new Morris.Donut({
                    // ID of the element in which to draw the chart.
                    element: 'chart-classification',
                    // Chart data records -- each entry in this array corresponds to a point on the chart.
                    data: [
                        @foreach (var type in Model.ConversationTypes)
                        {
                            <text>{ label: '@type', value: '@Model.Conversations.Count(c => c.Type == type)' },</text>
                        }
                    ],
                    colors: ['#656d78', '#3bafda', '#E9573F'],
                    formatter: function (y) { return Math.round(y * 100 / @totalConversation) + "%" },
                    resize: true
                });
            }

            if(@totalFeedback > 0) {
                new Morris.Donut({
                    // ID of the element in which to draw the chart.
                    element: 'chart-feedback',
                    // Chart data records -- each entry in this array corresponds to a point on the chart.
                    data: [
                        @foreach (var emoticon in Model.Statuses)
                        {
                            <text>{ label: '@emoticon.GetDescription()', value: '@Model.Feedbacks.Count(f => f.Emoticon == emoticon)' },</text>
                        }
                    ],
                    colors: ['#8bc34a', '#ffc107', '#e84e40', '#03a9f4', '#9c27b0', '#90a4ae'],
                    formatter: function (y) { return Math.round(y * 100 / @totalFeedback) + "%" },
                    resize: true
                });
            }
        }

        $(function () {
            // Initialize charts
            initHomeCharts();
        });
    </script>
}